<!DOCTYPE html>
<html lang="en"xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
               xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>Bingo个人博客</title>
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../res/css/main.css">
<!--加载meta IE兼容文件-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<style>
  .userLabel{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 30px
  }
</style>
<body>
  <div class="header" style="margin-bottom: 40px">
    <div class="menu-btn">
      <div class="menu"></div>
    </div>
    <h1 class="logo">
      <a href="index.html">
        <span>MYBLOG</span>
        <img src="../res/img/logo.png" style="width: 120px;height: 80px">
      </a>
    </h1>
    <div class="nav">
      <a href="/toIndex.action" class="active">文章</a>
      <a href="/toMyBlog.action">我的博客</a>
      <a href="/toWrite.action">写博客</a>
      <a href="/toAlbum.action">相册</a>
      <a href="/toAbout.action">个人空间</a>
      <input form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
      ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
      <button class="layui-btn" onclick="search()"><i class="layui-icon">&#xe615;</i>搜索</button>
      <label th:if="${session.loginUser != null}">
        <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
        <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
        <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
      </label>
    </div>
    <form id="searchForm" action="/searchEssayByTitle.action" method="get">
    </form>
    <ul class="layui-nav header-down-nav">
      <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
      <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
      <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
      <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
      <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
      <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
      <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
    </ul>
    <div th:if="${session.loginUser == null}">
      <p  class="welcome-text">
        <a href="toLogin" class="layui-btn">登录</a>
      </p>
    </div>
    <div th:if="${session.loginUser != null}">
      <p  class="welcome-text">
        <a href="toLogout" class="layui-btn">注销</a>
      </p>
    </div>

  </div>

  <!--<div class="banner">
    <div class="cont w1000">
      <div class="title">
        <h3>Bingo<br />BLOG</h3>
        <h4>u are an apple of my eye</h4>
      </div>
      &lt;!&ndash;<div class="amount">
        <p><span class="text">访问量</span><span class="access">1000</span></p>
        <p><span class="text">日志</span><span class="daily-record">1000</span></p>
      </div>&ndash;&gt;
    </div>
  </div>-->
  <div class="layui-carousel" id="test1" style="margin-left: 2%;margin-top: 40px">
    <div carousel-item>
      <div class="banner" style="border-radius: 10px;">
        <div class="cont w1000">
          <div class="title">
            <h3>Bingo<br />BLOG</h3>
            <h4>u are an apple of my eye</h4>
          </div>
        </div>
      </div>
      <div class="banner" style="border-radius: 10px;background: url(../res/img/zhizi.jpg)">
        <div class="cont w1000">
          <div class="title">
            <h3>Your<br />BLOG</h3>
            <h4>I once had a dream</h4>
          </div>
        </div>
      </div>
      <div class="banner" style="border-radius: 10px;background: url(../res/img/RandM.jpg)">
        <div class="cont w1000">
          <div class="title">
            <h3>Bingo<br />BLOG</h3>
            <h4>Rick And Morty</h4>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="content">
    <div class="cont w1000" style="max-width: 1000px">
      <div class="title">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="/toIndex.action" class="active" >博客广场</a>
          <a href="toMyBlog.action">我的博客</a>
        </span>
      </div>
      <div class="list-item">
        <div th:each="essay:${session.essayList}" class="item">
          <div class="layui-fluid">
            <div class="layui-row" th:if="${essay.id%2==1}">
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img th:src="@{${essay.imgUrl}}" alt="" style="height: 280px;width: 85%;margin-left: 8%;box-shadow: 0 3px 18px #000000;border-radius: 3px"></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7" style="border-radius: 3px;box-shadow: 0 3px 18px #125326;float: right;
    margin-top: 5px;">
                <div class="item-cont" style="margin-left: 8%">
                  <h3 th:text="${essay.title}"><button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                  <h5 th:text="${essay.publishTime}" style="float: right;margin-right: 60%;margin-top: 2px;"></h5>
                  <h5 th:text="${essay.tag}"></h5>
                  <p th:text="${essay.content}"></p>
                  <!--<a href="/searchEssayByTitle.action" class="go-icon"></a>-->
                  <form action="/searchEssayByNumber.action" method="get">
                    <input type="hidden" th:value="${essay.number}" name="essayNumber">
                    <button type="submit" class="go-icon" style="border: 15px solid transparent;float: right;margin-right: 20%"></button>
                  </form>
                </div>
              </div>
            </div>
            <div class="layui-row" th:if="${essay.id%2==0}"}>
              <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                <div class="img"><img th:src="@{${essay.imgUrl}}" alt="" style="height: 280px;width: 85%;margin-left: 8%;box-shadow: 0 3px 18px #000000;border-radius: 3px"></div>
              </div>
              <div class="layui-col-xs12 layui-col-sm8 layui-col-md7" style="border-radius: 3px;box-shadow: 0 3px 18px rgba(100, 0, 0, 1);    float: right;
    margin-top: 5px;">
                <div class="item-cont" style="margin-left: 8%">
                  <h3 th:text="${essay.title}"><button class="layui-btn layui-btn-danger new-icon">new</button></h3>
                  <h5 th:text="${essay.publishTime}" style="float: right;margin-right: 60%;margin-top: 2px;"></h5>
                  <h5 th:text="${essay.tag}"></h5>
                  <p th:text="${essay.content}"></p>
                  <!--<a href="/searchEssayByTitle.action" class="go-icon"></a>-->
                  <form action="/searchEssayByNumber.action" class="layui-form" method="get">
                    <input type="hidden" th:value="${essay.number}" name="essayNumber">
                    <button type="submit" class="go-icon" style="border: 15px solid transparent;float: right;margin-right: 20%"></button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <p th:text="当前为+${session.pageNum}+页" style="font-size: large"></p>
        <form action="/toLastPage.action" th:if="${session.hasLast == 1}">
          <button type="submit" class="layui-btn" style="margin-top: 10px;float: left;margin-left: 30%">上一页</button>
        </form>
        <form action="/toNextPage.action" th:if="${session.hasNext == 1}" method="get">
          <button type="submit" class="layui-btn" style="margin-top: 10px;float: right;margin-right: 30%">下一页</button>
        </form>
      </div>
    </div>
  </div>

  <div class="footer-wrap">
    <div class="footer w1000">
      <div class="qrcode">
        <img src="../res/img/erweima.jpg">
      </div>
      <div class="practice-mode">
        <img src="../res/img/down_img.jpg">
        <div class="text">
          <h4 class="title">我的联系方式</h4>
          <p>微信<span class="WeChat">15521306790</span></p>
          <p>手机<span class="iphone">15521306790</span></p>
          <p>邮箱<span class="email">1115051923@qq.com</span></p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script type="text/javascript">
    layui.config({
      base: '../res/js/util/'
    }).use(['element','laypage','jquery','menu'],function(){
      element = layui.element,laypage = layui.laypage,$ = layui.$,menu = layui.menu;

      laypage.render({
        elem: 'demo'
        ,count: 70 //数据总数，从服务端得到
      });
      menu.init();
    })

    layui.use('carousel', function(){
      var carousel = layui.carousel;
      //建造实例
      carousel.render({
        elem: '#test1'
        ,width: '96%' //设置容器宽度
        ,height: '480px'
        ,arrow: 'always' //始终显示箭头
        ,autoplay: true
        ,interval: 2000
        //,anim: 'updown' //切换动画方式
      });
    });
  </script>
  <script>
    function search() {
      document.getElementById("searchForm").submit();//js原生方式表单提交
    }
  </script>
</body>
</html>